<template>
  <div style="width:100%;height:100%">
    <div class="container login-wrapper">
      <div class="logo"></div>
      <div class="words">Internal purchase</div>
      <!--登录部分 start-->
      <div class="login-form">
        <el-form
          ref="loginForm"
          class="loginFormStyle"
          :model="loginForm"
          :rules="loginRules"
          autoComplete="on"
        >
          <el-form-item prop="username">
            <el-input class="input-login"
                      name="username"
                      v-model="loginForm.username"
                      auto-complete="on"
                      clearable
                      placeholder="请输入用户名">
              <img slot="prepend" src="../../assets/icon/user.png" style="background-color: transparent">
            </el-input>
          </el-form-item>
          <el-form-item prop="password" size="large">
            <el-input name="password"
                      type="password"
                      clearable
                      resize="both"
                      class="input-login"
                      v-model="loginForm.password"
                      placeholder="请输入密码">
              <img slot="prepend" src="../../assets/icon/password.png" alt="">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="loginBtn" :loading="loading" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
        <!--登录部分 end-->
      </div>
    </div>
  </div>
</template>

<script>
  import {isvalidUsername} from '@/utils/validate'
  import {mapState, mapMutations} from "vuex";
  import {login} from '../../service/index'

  export default {
    name: "Login",
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isvalidUsername(value)) {
          callback(new Error('Please enter the correct user name'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('The password can not be less than 6 digits'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username: "admin",
          password: "123456"
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}]
        },
        loading: false,
      };
    },
    mounted() {
    },
    computed: {
      ...mapState(["app"])
    },
    methods: {
      handleLogin(){
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const data = {
              account: 'yimlink.defia',
              password: '1',
            };
            this.doLogin(data);
          }
        });
      },
      doLogin(param){
        this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
          this.loading = false
          this.$router.push({path: '/home'})
        }).catch(() => {
          this.loading = false
        })
      },
    }
  };
</script>

<style scoped>
  /*设置背景图*/
  .container {
    width: 100%;
    height: 100%;
    background: url("../../assets/pc-bg.png") no-repeat center;
    background-size: 100% 100%;
  }

  .container:before {
    content: "";
    display: table;
  }

  .container .logo {
    width: 339px;
    height: 60px;
    margin: auto;
    margin-top: 10%;
    background-image: url("../../assets/logo.png");
    background-size: 100% 100%;
  }

  .words {
    margin-top: 49px;
    margin-bottom: 68px;
    font-size: 36px;
    line-height: 50px;
    color: #fff;
  }

  .input-login {
    height: 52px;
    border-radius: 8px;
    border: 1px solid rgba(224, 227, 229, 1);
    background-color: transparent;
    color: white;
  }

  .input-login input {
    height: 50px;
    line-height: 50px;
  }

  .login-form {
    width: 300px;
    margin: 0 auto;
  }

  .loginBtn {
    height: 52px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(224, 227, 229, 1);
    background-color: transparent;
    color: white;
  }
</style>
